<template>
  <div style="width: 100%;height: 100%; display: flex; justify-content: center; align-items: center">
    <div v-if="isEcharts" :class="className" :style="{height:height,width:width}" />
    <dv-active-ring-chart :config="dataVconfig" style="width:130px;height:130px; margin: auto;" />
  </div>
  
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    isEcharts: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    dataVconfig: {
      type: Object,
      default: () => ({})
    },
    pieData: {
      type: Array,
      default: () => [
        { value: 320, name: '在库数量' },
        { value: 240, name: '入库数量' },
        { value: 149, name: '出库数量' },
      ]
    },
    color: {
      type: Array,
      default: () => ['#3FFAFF','#FFC435','#03BDFF']
    }
  },
  data() {
    return {
      chart: null,
      interval: null,
      currentIndex: 0
    }
  },
  mounted() {
    if (this.isEcharts) {
      this.$nextTick(() => {
        this.initChart()
      })
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null

    if (this.interval) {
      clearInterval(this.interval);
      this.interval = null;
    }
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          show: false,
          trigger: 'item',
        },
        color: this.color,
        series: [
          {
            name: '楼层数据',
            type: 'pie',
            radius: ['55%', '80%'],
            hoverAnimation: false,
            emphasis: {
              disabled: false,
              scale: false,
              scaleSize: 10,
              label: {
                show: true,
                fontSize: 14,
                color: '#fff',
                formatter: '{c}\n\n{b}'
              }
            },
            label: {
              show: false,
              position: 'center',
              color: '#fff',
              fontSize: 14,
              formatter: '{c}\n\n{b}'
            },
            data: this.pieData,
            animationEasing: 'cubicInOut',
            animationDuration: 1000
          }
        ]
      })

      this.updateHighlight();
      this.interval = setInterval(() => {
          this.updateHighlight();
      }, 3000);

      // 鼠标移入高亮当前项，鼠标移出取消高亮
      this.chart.on('mousemove',
        {
          seriesIndex: 0,
        },
        (params) => {
          // 鼠标移入停止轮播
          // clearInterval(this.interval);
          // this.interval = null;
          // 高亮当前项
          if (this.currentIndex !== params.dataIndex) {
            this.chart.dispatchAction({
              type: 'downplay',
              seriesIndex: 0,
              dataIndex: this.currentIndex
            });

            this.currentIndex = params.dataIndex;

            this.chart.dispatchAction({
              type: 'highlight',
              seriesIndex: 0,
              dataIndex: this.currentIndex
            });
          }
        }
      );

      // // 鼠标移出重新轮播
      // this.chart.on('mouseout', () => {
      //   this.interval = setInterval(() => {
      //     this.updateHighlight();
      //   }, 3000);
      // })
    },
    updateHighlight() {
      // 取消高亮当前项
      this.chart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: this.currentIndex
      });

      // 更新当前索引
      this.currentIndex = (this.currentIndex + 1) % this.pieData.length;

      // 高亮新项
      this.chart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: this.currentIndex
      });
    }
  }
}
</script>
